<template>
  <div class="publish">
    <van-nav-bar title="发布" :border="false" />


    <van-form validate-first @submit="onSubmit">
      <!-- 通过 pattern 进行正则校验 -->
      <div class="title">
        <van-field v-model="title" name="title" placeholder="请输入标题" :rules="[
          { required: true, },
        ]" />
      </div>
      <!-- 通过 validator 进行函数校验 -->
      <div class="content">
        <van-field style="margin-top: 10px" name="content" v-model="content" rows="5" autosize type="textarea"
          placeholder="说点什么吧~" :rules="[
            { required: true, },
          ]" show-word-limit />
        <!-- <van-uploader name="uploader" v-model="fileList">
          <div class="uploader-icon">
            <van-icon name="plus" />
          </div>
        </van-uploader> -->
        <van-field name="uploader">
          <template #input>
            <van-uploader name="uploader" v-model="fileList" :max-count="1" :deletable="false">
              <div class="uploader-icon">
                <van-icon name="plus" />
              </div>
            </van-uploader>
          </template>
        </van-field>
      </div>
      <div class="type">
        <van-field v-model="cate_name" name="cate_name" label="请选择类型" input-align="right" :disabled="true" />
        <div class="item">
          <van-button class="cateButton" @click="active(index)" v-for="(item, index) in cate" :key="item._id" round
            type="primary" native-type="button" size="mini">
            {{ item.name }}</van-button>

        </div>
        <div style="margin: 16px;">
          <van-button color="#5E81B5" round block type="info" native-type="onSubmit">提交</van-button>
        </div>
      </div>

    </van-form>

  </div>
</template>

<script>
import { Field, Form, Button, Uploader, Cell } from 'vant';
import { getCateList } from '@/API/home';
import { addArticle } from '@/API/api';
import { mapState, mapActions } from 'vuex';
export default {
  data() {
    return {
      title: '',
      content: '',
      cate_id: '',
      cate: [],
      cate_name: '',
      fileList: [],
      
    }
  },
  created() {
    this.getCateList()
    this.isLogin()
  },
  computed: {
    ...mapState('users', ['userInfo',])
  },
  components: {
    [Field.name]: Field,
    [Form.name]: Form,
    [Button.name]: Button,
    [Uploader.name]: Uploader,
    [Cell.name]: Cell,

  },
  methods: {
    isLogin() {
      if (this.userInfo == '') {
        this.$toast('请先登录')
        setTimeout(() => {
          this.$router.push('/login')
        }, 1000);
      }
    },
    ...mapActions('publishs', ['upload']),
    active(i) {
      this.cate_name = this.cate[i].name
      this.cate_id = this.cate[i]._id
      console.log(this.cate_id);
    },
    async onSubmit() {
      let { title, content, fileList, userInfo, cate_name, cate_id } = this;
      let imageSrc = await this.upload(fileList)


      addArticle({
        title,
        content,
        author_id: userInfo._id,
        author: userInfo.nickname,
        imageSrc,
        cate_name,
        cate_id
      }).then(res => {
        if (res.code == 0) {
          this.$toast(res.msg)
          this.title=''
          this.content=''
          this.cate_name=''
          
         

        } else {
          this.$toast(res.msg)
        }


      },
      )

    },
    getCateList() {
      getCateList().then(res => {
        this.cate = res.data
        console.log(this.cate);
      })
    }
  },


}
</script>

<style lang="less" scoped>
.publish {

  width: 375px;
  height: 100vh;
  background-color: rgb(244, 246, 246);

  .content {
    background-color: #fff;
  }

  .uploader-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    // background-color: #fff;

  }

  .type {
    background-color: #fff;
    margin-top: 10px;
    border-radius: 8px;
    padding-bottom: 10px;

    .item {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;

      .cateButton {
        margin-top: 5px;
        width: 25%;
        background-color: rgb(244, 246, 246);
        border: none;
        color: black
      }


    }
  }
}

::v-deep .van-nav-bar__title {
  color: #fff;
}

::v-deep .van-field--disabled .van-field__label span {
  color: #111;
}

::v-deep .van-nav-bar {
  background-color: @baseColor;
}

::v-deep .van-form {
  padding: 10px 18px;
  box-sizing: border-box;
}

::v-deep .title .van-cell {
  border-radius: 8px;
}

::v-deep .van-uploader {

  box-sizing: border-box;
  border: 2px solid rgb(239, 239, 239);
  border-radius: 8px;
  // z-index: 999;
}

::v-deep .van-uploader__preview {
  margin: 0;
}
</style>